<html>
<title>为实例添加属性$set</title>

<head>
    <script src="./js/vue.js"></script>

</head>

<body>
    <div class="container">
        <button @click="addAge1">使用=添加age1</button>
        <button @click="addAge2">使用$set添加age2</button>>
        <button @click="addAge3">使用Vue.set添加age3</button>>
        <h3>{{ user.name }}</h3>
        <br>
        <h3>{{ user.age1 }}</h3>
        <br>
        <h3>{{ user.age2 }}</h3>
        <br>
        <h3>{{ user.age3 }}</h3>
        <br>
    </div>
    <script>
        var vm = new Vue({
            data: {
                user: {
                    name: "tom"
                }
            },
            methods: {
                addAge1() {//使用=添加的属性不会被Vue监视
                    this.user.age1 = 18;
                },
                addAge2() {//实例方法set
                    this.$set(this.user, "age2", 19);
                },
                addAge3() {//全局set
                    Vue.set(this.user, "age3", 20);
                }

            }
        }).$mount('.container');
    </script>
</body>

</html>